<template>
    <div id="app">
        <main>
            <!-- 左侧导航 -->
            <div class="main-left">
                <div class="logo" @click="goWelcone()">
                    <img src="../../assets/image/car-publisher/menu_logo.png" width="80">
                </div>
                <el-row class="tac">
                    <el-col>
                        <el-menu
                                :default-active="activeText"
                                :default-openeds="activeArr"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @select="select"
                                @close="handleClose"
                                unique-opened="true"
                                text-color="#BFCBD9"
                                active-text-color="#000">
                            <el-submenu index="1" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                <template slot="title">
                                    <i class="el-icon-news"></i>
                                    <span>运营</span>
                                </template>
                                <el-menu-item-group>
                                    <!--<el-menu-item index="电话委托"><router-link :to="{name:'operPhone'}">电话委托</router-link></el-menu-item>-->
                                    <router-link :to="{name:'operBid'}" ><el-menu-item index="运营出价">运营出价</el-menu-item></router-link>
                                    <router-link :to="{name:'operMaintain'}" ><el-menu-item index="交易维护">交易维护</el-menu-item></router-link>
                                    <router-link :to="{name:'operFlow'}" ><el-menu-item index="流量统计">流量统计</el-menu-item></router-link>
                                    <router-link :to="{name:'operLog'}" ><el-menu-item index="日志记录">日志记录</el-menu-item></router-link>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="2" background-color="#304156" text-color="#fff" active-text-color="#fff" >
                                <template slot="title">
                                    <i class="el-icon-goods"></i>
                                    <span>拍品</span>
                                </template>
                                <el-menu-item-group>
                                    <router-link :to="{name:'group'}" ><el-menu-item index="组管理">组管理</el-menu-item></router-link>
                                    <router-link :to="{name:'special'}"><el-menu-item index="专题管理">专题管理</el-menu-item></router-link>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu
                                    index="3" background-color="#304156" text-color="#fff" active-text-color="#fff" >
                                <template slot="title">
                                    <i class="el-icon-tickets"></i>
                                    <span>订单</span>
                                </template>
                                <el-menu-item-group>
                                    <router-link :to="{name:'auction'}"><el-menu-item index="拍品订单">拍品订单</el-menu-item></router-link>
                                    <router-link :to="{name:'afterSale'}"><el-menu-item index="售后订单">售后订单</el-menu-item></router-link>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu
                                    index="4" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                <template slot="title">
                                    <i class="el-icon-star-off"></i>
                                    <span>用户</span>
                                </template>
                                <el-menu-item-group>
                                    <router-link to="/user/userList"><el-menu-item index="用户列表">用户列表</el-menu-item></router-link>
                                    <router-link to="/user/authentication"><el-menu-item index="实名认证">实名认证</el-menu-item></router-link>
                                    <!--<router-link to="/user/degreeHeat" v-if="admin(430)"><el-menu-item index="热度排行">热度排行</el-menu-item></router-link>-->
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu
                                    index="5" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                <template slot="title">
                                    <i class="el-icon-sold-out"></i>
                                    <span>资金</span>
                                </template>
                                <el-menu-item-group>
                                     <router-link to="/capital/examine"><el-menu-item index="财务审核">财务审核</el-menu-item></router-link>
                                     <router-link to="/capital/transaction"><el-menu-item index="财务明细">财务明细</el-menu-item></router-link>
                                     <!--<router-link to="/capital/transaction/income"><el-menu-item index="收入明细">收入明细</el-menu-item></router-link>-->
                                     <!--<router-link to="/capital/transaction/expenditure"><el-menu-item index="支出明细">支出明细</el-menu-item></router-link>-->
                                     <!--<router-link to="/capital/transaction/bond"><el-menu-item index="保证金明细">保证金明细</el-menu-item></router-link>-->

                                </el-menu-item-group>
                            </el-submenu>
                       
                        </el-menu>
                    </el-col>
                </el-row>
            </div>

            <!-- 右侧主内容区 -->
            <div  class="main-right">
                <div class="right-top">
                    <div class="topLeft">{{titleName}}</div>
                    <div class="topRight">
                        <!--<div class="rightHome"><a href="http://www.docqbot.com " target="_blank">网站首页</a></div>-->
                        <div class="User">
                            <div class="UserImg">
                                <img class="image" :src="adminPhoto"/>
                            </div>
                            <div class="name">{{adminName}}</div>
                            <ul class="sub-menu">
                                <li class="sub-menu-item"><router-link to="/setup" class="a">帐号管理</router-link></li>
                                <li class="sub-menu-item"><router-link to="/" class="a">消息中心</router-link></li>
                                <li class="sub-menu-item"><a class="a" @click="exitSystem">退出</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--展示内容-->
                <div class="showBox">
                    <router-view></router-view>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
    import {common} from '../../assets/js/common/common'
     import {commonService} from '../../service/commonService.js'
    export default {
        name: 'app',
        data: function (){
            return {
                active:true,
                titleName:'',
                name:'',
                activeText:'',
                activeArr:[],
                userName:'',
                adminList:[],
                adminPhoto:'',
                adminName:'',
            }
        },
        mounted:function() {
            let that = this;
            that.name = that.$route.name;
            // console.log('菜单路径',that.name)
            let token = window.localStorage.getItem('token');
            if(token == null){
                that.$router.replace({name:'login'})
            }else{
                let JWT = token.split('.');
                let info = JWT[1];
                let tokenData = common.packageUserInfo(info);
                that.adminList = tokenData.permissions;
                // window.localStorage.setItem('jurisdiction',JSON.stringify(that.adminList))

            }
            this.getAdminInfo()
        },
        methods: {
             getAdminInfo () {
                let that=this;
               commonService.getUsersprofile().then(function(res){
                    //console.log('当前管理员信息', res);
                    if(res.data.success){
                        let obj = res.data.datas;
                        that.adminPhoto = that.$store.state.picHead + obj.headImg;
                        that.adminName = obj.name;
                        if(that.$route.path=='/'){
                            // that.$router.push({name: 'setup'});
                        }
                        if(that.$route.path=='/home'){
                            // that.$router.push({name: 'setup'});
                        }
                    }else{
                        that.$message.error(res.data.message);
                    }
                })
            },
            // 退出
            exitSystem () {
                let that = this;
                 commonService.deleteTokens().then(function (res) {
                    if(res.data.success){
                        localStorage.token = '';
                        that.$router.push({name: 'login'});
                    }else{
                        that.$message.error(res.data.message);
                    }
                });
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            select(key,keyPath,indexPath){
                // console.log(key,keyPath,indexPath._uid);
                this.titleName = key
            },
            goWelcone(){
                let that = this;
                that.titleName = ''
                that.activeText = ''
                that.activeArr = []
                // that.$router.push({name:'welcome'})
            },
            back(){
                let that = this;
                that.$confirm('是否确认退出', '退出', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    window.localStorage.removeItem('token');
                    that.$router.replace({name:'login'})
                    this.$message({
                        type: 'success',
                        message: '已退出 '
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消退出'
                    });
                });
            },
            //管理员权限
//             admin(value){
//                 let that = this;
// //                console.log(that.adminList)
//                 for(let i = 0; i < that.adminList.length; i++){
//                     let val = value + ':query'
//                     if(val === that.adminList[i]){
//                         return true;
//                     }
//                 }
//                 return false;
//             }
        }
    }
</script>

<style>
    body{margin: 0;overflow-y: hidden;position: absolute;}
    body::-webkit-scrollbar {
        width:4px;
        height:10px;
    }
    /* 轨道 */
    body::-webkit-scrollbar-track {
        opacity: 0;
    }
    /* 手柄 */
    body::-webkit-scrollbar-thumb {
        -webkit-border-radius: 15px;
        border-radius: 15px;
        background:rgba(200,200,200,0.7);
    }
    /* 手柄激活态 */
    body::-webkit-scrollbar-thumb:window-inactive {
        background: #DDDEE0
    }
    #app {
        min-width: 1200px;
        margin: 0 auto;
        font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
        overflow-y: hidden;
    }


    /* 主内容区 */
    a{text-decoration: none;color: inherit;}
    main{  min-width: 1300px;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  position:relative;height: -webkit-fill-available; top:0;left:0;right:0;bottom:0;margin:auto; background-color: #FCFCFC;}
    main .main-left{position:absolute;text-align: center;width: 181px;height:100%;float: left;background:#304156; overflow: scroll;}
    main .main-left::-webkit-scrollbar {display:none}
    main .main-left .logo{width:100%;height:60px;font-size:16px;font-weight: bold;line-height:60px;color:#BFCBD9; display: flex;justify-content: flex-start;align-items: center;}
    main .main-left .logo > img{margin-left: 20px;}
    main .main-left .el-menu{background:#304156;}
    .el-submenu .el-menu-item{min-width:180px;}
    .el-menu-item.is-active{color:#3792FF !important;background:#1F2D3D;}
    .el-menu-item-group{background:#1F2D3D;}
    /*.is-opened{background:#1F2D3D;}*/
    .el-submenu .el-menu-item:hover, .el-submenu__title:hover{background:#1F2D3D;}
    .el-submenu .el-menu-item, .el-submenu__title{color:#BFCBD9;text-align:left;}
    main .main-right{position: absolute;left:180px;right:0;top:0;bottom:0;margin:auto;-webkit-box-flex: 1;  -ms-flex: 1;  flex: 1;  background-color: #f9f9f9;overflow: overlay;}
    .right-top{width:100%;height:60px;border-bottom: 1px solid #e6e6e6;padding:0 40px;box-sizing: border-box;background-color: #fff;}
    .right-top .topLeft{width:300px;height:60px;line-height:60px;float:left;font-size: 14px;color:#97a8be;font-weight: bold;}
    .right-top .topRight{width:300px;height:60px;float:right;}
    .right-top .topRight .rightHome{width:100px;float:left;line-height:60px;}
    .right-top .topRight .User{width:200px;height:60px;line-height:60px;text-align: center;float:right;display:flex;justify-content: flex-end;align-items: center;}
    .right-top .topRight .User .UserImg{width:40px;height:40px;border-radius: 100%;float:left;border:2px solid #eeeeee;overflow:hidden;}
    .right-top .topRight .User .UserImg .image{width:100%;height:100%;}
    .right-top .topRight .User .name{float:left;width:80px; white-space: nowrap;text-overflow:ellipsis;overflow:hidden; text-align: center;color:#969896;line-height: 60px;font-size: 14px;}
    .right-top{
        .topRight{
            .User{
                position:relative;
                .sub-menu{
                    width: 100%;border-left: 1px solid #eee;border-right: 1px solid #eee;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    border-radius: 4px;
                    position:absolute; top: 59px;left:0; z-index: 1;background:#fff;display:none;
                    .sub-menu-item{
                        height: 40px; line-height: 40px; border-bottom: 1px solid #eee;
                        .a{width:100%;height: 100%;display:block;}
                        .a:hover{cursor: pointer; color:#409eff;}
                    }
                }
            }
        }
    }
    .right-top .topRight .User:hover .sub-menu{display: block;}
    .user-menu-item{
      .el-submenu__title{display: flex;align-items: center;}
    }
    .el-submenu__title i{width:24px;height:18px;font-size:18px;color:#BFCBD9;}
</style>